import React from 'react';

import { useEffect } from 'react'
// 获取定义的rtk store仓库数据
import { useSelector, useDispatch } from 'react-redux';
// 导入 reducers 方法
import { addcount, jiancount } from '../../store-rtk/index'

const Father = () => {
    // 01: 获取store数据
    const { count, shoplist } = useSelector(state => state);
    // console.log('store', store);
    // 02: 获取dispatch方法
    const dispatch = useDispatch();

    return (
        <div>
            {/* store中count */}
            <p>
                <button onClick={() => {
                    dispatch(addcount())
                }}>+1</button>
                count:{count}
                <button onClick={() => {
                    dispatch(jiancount(10))
                }}>-10</button>
            </p>
            <ul>
                {
                    shoplist.map(item => <li key={item.id}>{item.name}</li>)
                }
            </ul>
        </div>
    );
}

export default Father;
